<template>
    <div class="notice">
        <div class="notice-list">
            <div v-if="noticeList.length > 0" class="notice-content" v-for="(item,index) in noticeList" :key="index">
                <div class="notice-date">
                    <span>{{item['create_time']}}</span>
                </div>
                <div class="notice-des">
                    <p>
                        尊敬的用户王小小，您好！你的
                        <span v-if="item.pid == 1">一</span>
                        <span v-if="item.pid == 2">二</span>
                        <span v-if="item.pid == 3">三</span>
                        级分销成员<span>{{item['nickname']}}</span>于<span>{{item['create_time']}}</span> 在商城消费
                        <span>{{item['pay_money']}}</span>元，您所获得佣金<span>{{item.commission}}</span>元，请注意查收！
                    </p>
                </div>
                <div class="notice-delete">
                    <div class="delete-box" @click="deleteNotice(item.id)">
                        <img src="~assets/icons/delete_red.png" alt="">
                        <span>删除</span>
                    </div>
                </div>
            </div>
            <div v-if="noticeList.length = 0" class="empty-notice">
                <empty-notice></empty-notice>
            </div>
        </div>
    </div>
</template>

<script>
import emptyNotice from './emptyNotice'

export default {
    name:'notice',
    data(){
        return {
            noticeList:[],
            showList:false
        }
    },
    methods:{
        getCommentList(){
            let that = this;
            let token = localStorage.getItem('token');
            let id = localStorage.getItem('distribution');
            let loader = that.loading();
            that.$ajax(that, 'get', that.$api.commentList+id, null, token,function(res){
                if(res.data['error_code'] == 0){
                    that.noticeList = res.data['msg'];
                }else{
                    that.toast(res.data['msg']);
                }
                loader.close();
            })
        }
    },
    components:{
        emptyNotice
    },
    mounted(){
        this.$store.state.tab = '我的通知';
        this.getCommentList();
    },
    activated(){
        this.$store.state.tab = '我的通知';
        this.getCommentList();
    }
}
</script>

<style lang='less'>
@rem:100rem;

.notice{
    width: 750/@rem;
    margin-top: 88/@rem;
    .notice-list{
        width: 100%;
        padding-top: 10/@rem;
        .notice-content{
            width: 100%;
            padding: 18/@rem 50/@rem;
            box-sizing: border-box;
            background: #ffffff;
            margin-top: 10/@rem;
            color: #444444;
            .notice-date{
                width: 100%;
                text-align: start;
            }
            .notice-des{
                width: 100%;
                text-align: start;
                font-size: 24/@rem;
                margin-top: 10/@rem;
                p{
                    text-indent: 40/@rem;
                }
            }
            .notice-delete{
                width: 100%;
                display: flex;
                justify-content: flex-end;
                .delete-box{
                    width: 122/@rem;
                    height: 66/@rem;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    img{
                        height: 30/@rem;
                        width: 30/@rem;
                    }
                    span{
                        color: #f9296e;
                        margin-left: 10/@rem;
                    }
                }
            }
        }
        .empty-notice{
            margin-top: 100/@rem;
        }
    }
}
</style>
